<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script type="text/javascript">

		window.onload = function () {

			var u1 = document.getElementById("u1");

			//点击按钮以后添加超链接
			var btn01 = document.getElementById("btn01");
			btn01.onclick = function () {
				//创建一个li
				var li = document.createElement("li");
				li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";

				//将li添加到ul中
				u1.appendChild(li);
			};


			/*
			 * 为每一个超链接都绑定一个单击响应函数
			 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
			 * 	而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
			 */
			//获取所有的a
			var allA = document.getElementsByTagName("a");
			//遍历
			/*for(var i=0 ; i<allA.length ; i++){
				allA[i].onclick = function(){
					alert("我是a的单击响应函数！！！");
				};
			}*/

			/*
			 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
			 * 我们可以尝试将其绑定给元素的共同的祖先元素
			 * 
			 * 事件的委派
			 * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
			 * 		从而通过祖先元素的响应函数来处理事件。
			 *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
			 */

			//为ul绑定一个单击响应函数
			u1.onclick = function (event) {
				event = event || window.event;

				/*
				 * target
				 * 	- event中的target表示的触发事件的对象
				 */
				//alert(event.target);


				//如果触发事件的对象是我们期望的元素，则执行否则不执行
				if (event.target.className == "link") {
					alert("我是ul的单击响应函数");
				}

			};

		};

	</script>
</head>

<body>
	<button id="btn01">添加超链接</button>

	<ul id="u1" style="background-color: #bfa;">
		<li>
			<p>我是p元素</p>
		</li>
		<li><a href="javascript:;" class="link">超链接一</a></li>
		<li><a href="javascript:;" class="link">超链接二</a></li>
		<li><a href="javascript:;" class="link">超链接三</a></li>
	</ul>

</body>

</html>